<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>数据绑定</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!--
        Vue模板语法有2大类：
            1.插值语法：
                功能：用于解析标签体内容
                写法：{{}}
            2.指令语法：
                功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）
                举例：v-bind:href="" 或 :href=""
                备注：Vue中有很多的指令，且形式都是v-???
    -->

    <div id="root">
      <h1>插值语法</h1>
      <h3>HELLO {{name}}</h3>
      <hr />
      <h1>指令语法</h1>
      <!-- <a v-bind:href="site.url.toUpperCase()">{{site.name}}官方文档</a> -->
      <a :href="site.url">{{site.name}}官方文档</a>
    </div>
    <script>
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          name: "Jack",
          site: {
            name: "Vue",
            url: "https://v2.cn.vuejs.org/",
          },
        },
      });
    </script>
  </body>
</html>
